<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.slide{position:relative;width: 320px;height: 480px;overflow: hidden;}
			.slide img{width: 320px;height: 100%;float: left;}
			.img-box{height:100%;transition:0.4s linear;}
			.img-box::after{content: "";display: block;overflow: hidden;clear: both;}
		</style>
	</head>
	<body>
		<div class="slide">
			<div class="img-box" id="img-box">
				
			</div>
		</div>
		<script type="text/javascript">
			// 第一步：布局，让图片横向排列，加一个父级，让父级宽度比所有图片宽度之和要宽。
			// 第二步：让图片每次切换一个，向左或向右，每次移动一张图片的宽度。
			var imgsArray = ['a-1.jpg','b-2.jpg','c-3.jpg','d-4.png'];
			var imgsLength = imgsArray.length; //
			var imgBox = document.getElementById('img-box');
			imgBox.style.width = imgsLength * 320 + 'px'; // 设置父级宽度为图片总宽度
			var str = ''; // 用来保存所有的img元素
			for(var i = 0;i < imgsLength;i++){ // 拼接所有图片的字符串
				str += '<img src="./images/'+imgsArray[i]+'">';
			}
			imgBox.innerHTML = str;

			var marginLeftValue = 0;
			var type = 'r-to-l'; // 状态变量，用来判断当前滚动的方向
			setInterval(function(){
				if(type == 'r-to-l'){
					if(marginLeftValue < imgsLength - 1){
						imgBox.style.marginLeft = '-'+ (marginLeftValue++) * 320 +'px';
					}else{
						type = 'l-to-r';
					}
				}
				if(type == 'l-to-r'){
					if(marginLeftValue > 0){
						imgBox.style.marginLeft = '-'+ (marginLeftValue--) * 320 +'px';
					}else{
						type = 'r-to-l';
					}
				}
				console.log(marginLeftValue);
			},1000);
		</script>
	</body>
</html>